<template>
	<div class="decorate-diyModule" :style="{background:background}">
    <!-- <diy-tpl :tplData="module"></diy-tpl> -->
    <div v-for="(item, index) in module" :key="index">
      <diy-audio v-if="item.type ==15" :tplItemData="item.content"></diy-audio>
      <blank v-else-if="item.type ==11" :tplItemData="item.content"></blank>
      <bulletin v-else-if="item.type ==16" :tplItemData="item.content" ></bulletin>
      <card-list v-else-if="item.type ==21" :tplItemData="item.content"></card-list>
      <community v-else-if="item.type ==29" :tplItemData="item.content"></community>
      <cut-line v-else-if="item.type ==10" :tplItemData="item.content"></cut-line>
      <diy-module v-else-if="item.type ==3" :tplItemData="item.content"></diy-module>
      <editor v-else-if="item.type ==1" :tplItemData="item.content"></editor>
      <goods v-else-if="item.type ==4" :tplItemData="item.content" :tplAllData="item"></goods>
      <goods-cate v-else-if="item.type ==17" :tplItemData="item.content"></goods-cate>
      <goods-list v-else-if="item.type ==5" :tplItemData="item.content"></goods-list>
      <goods-sales v-else-if="item.type ==20 && JSON.stringify(item.content) != '{}'" :tplItemData="item.content"></goods-sales>
      <goods-search v-else-if="item.type ==6" :tplItemData="item.content"></goods-search>
      <img-adv v-else-if="item.type ==9" :tplItemData="item.content"></img-adv>
      <img-nav v-else-if="item.type ==8" :tplItemData="item.content"></img-nav>
      <min-type v-else-if="item.type ==18" :tplItemData="item.content"></min-type>
      <pd-living v-else-if="item.type ==30" :tplItemData="item.content"></pd-living>
      <point-exchange v-else-if="item.type ==27" :tplItemData="item.content"></point-exchange>
      <pre-sell v-else-if="item.type ==31" :tplItemData="item.content"></pre-sell>
      <reco-goods v-else-if="item.type ==19" :tplItemData="item.content"></reco-goods>
      <sec-kill v-else-if="item.type ==28" :tplItemData="item.content"></sec-kill>
      <showcase v-else-if="item.type ==13" :tplItemData="item.content"></showcase>
      <slide-nav v-else-if="item.type ==22" :tplItemData="item.content"></slide-nav>
      <slide-top-nav v-else-if="item.type ==23" :tplItemData="item.content"></slide-top-nav>
      <store  v-else-if="item.type ==25" :tplItemData="item.content"></store>
      <text-nav v-else-if="item.type ==7" :tplItemData="item.content"></text-nav>
      <title-tpl v-else-if="item.type ==2" :tplItemData="item.content"></title-tpl>
      <top-menu v-else-if="item.type ==12" :tplItemData="item.content"></top-menu>
      <diy-video v-else-if="item.type ==14" :tplItemData="item.content"></diy-video>
      <live-list v-else-if="item.type ==44" :tplItemData="item.content" :type="item.type"></live-list>

      <!-- 专题分类导航组件 -->
      <magazine-lists-top-nav v-else-if="item.type =='34'" :tplItemData="item.content"></magazine-lists-top-nav>
    </div>
  </div>
</template>

<script>
  import diyAudio from '../audio'
  import blank from '../blank'
  import bulletin from '../bulletin'
  import cardList from '../cardList'
  import community from '../community'
  import cutLine from '../cutLine'
  import diyModule from '../diyModule'
  import editor from '../editor'
  import goods from '../goods'
  import goodsCate from '../goodsCate'
  import goodsList from '../goodsList'
  import goodsSales from '../goodsSales'
  import goodsSearch from '../goodsSearch'
  import imgAdv from '../imgAdv'
  import imgNav from '../imgNav'
  import minType from '../minType'
  import pdLiving from '../pdLiving'
  import pointExchange from '../pointExchange'
  import preSell from '../preSell'
  import recoGoods from '../recoGoods'
  import secKill from '../secKill'
  import showcase from '../showcase'
  import slideNav from '../slideNav'
  import slideTopNav from '../slideTopNav'
  import store from '../store'
  import textNav from '../textNav'
  import titleTpl from '../title'
  import topMenu from '../topMenu'
  import diyVideo from '../video'
  import liveList from '../liveList'

  import magazineListsTopNav from '../magazineListsTopNav'
  import { getNewDiyMoudle } from '@/api/shop/index'
  import Vue from 'vue'

  export default Vue.extend({
    props: {
    tplItemData: {
      type: Object,
      default() {
        return []
      }
    }
  },
    components: {
      diyAudio,
    blank,
    bulletin,
    cardList,
    community,
    cutLine,
    diyModule,
    editor,
    goods,
    goodsCate,
    goodsList,
    goodsSales,
    goodsSearch,
    imgAdv,
    imgNav,
    minType,
    pdLiving,
    pointExchange,
    preSell,
    recoGoods,
    secKill,
    showcase,
    slideNav,
    slideTopNav,
    store,
    textNav,
    titleTpl,
    topMenu,
    diyVideo,
    magazineListsTopNav,
    liveList
  },

    data() {
      return {
        diyModule,
        diyModule_id: null,
        module: [],
        background: 'white'
      }
    },
    created() {
      this.diyModule_id = this.tplItemData.custom_module_id
      getNewDiyMoudle({ id: this.diyModule_id }).then(res => {
        if (res.status == 1) {
          this.background = res.data.backgroundColor
          // this.module = res.data.diyHtml
          this.ProcessingLoading(res.data.diyHtml)
        }
      })
    },
    methods: {
      // 处理视频数据
      ProcessingLoading(data) {
        let videoSort = 0;
        let tplData = data
        // console.log('11111ProcessingLoading.....', tplData)
        for (let i = 0; i < tplData.length; i++) {
          if (tplData[i].type == 14) {
            if (typeof isPlayArr === "undefined") {
              var isPlayArr = [];
            }
            isPlayArr[videoSort] = false;
            tplData[i].content.videoSort = videoSort;
            videoSort++;
            tplData[i].content.isPlayArr = isPlayArr;
            // console.log('ProcessingLoading.....tplData', tplData[i])
          }
        }
        this.module = tplData
      },
    }
  })
</script>

<style>
</style>
